<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../static/css/mui.min.css" rel="stylesheet" />
		<link href="../static/css/style1.css" rel="stylesheet" />
		<style>
			.header a{width: 100%;}
			.touxinag{background: #00b4ff;color: #fff;width: 90px;height: 20px;line-height: 20px;border-radius: 10px;text-align: center;font-size: 14px;position: absolute;top: 45px;left:calc(50% - 45px);}
		    .touxiang-input{position: absolute;top: 45px;left:calc(50% - 45px);opacity:0;height: 20px;width: 90px;}
		    .repass-form{padding: 10px;}
		    .repass-form-ul{padding: 75px 20px 10px;}
	    	.repass-form-ul li label{font-size: 15px;color: #8c7e7e;}
	        .repass-form-ul li input{height: 35px;}
	        .repass-form-ul li input::-ms-input-placeholder{
				    color:#d7d6d6;font-size: 14px;
			}
			.repass-form-ul li textarea::-ms-input-placeholder{ color:#d7d6d6;font-size: 14px;}
			.repass-form-ul li textarea::-webkit-input-placeholder{ color:#d7d6d6;font-size: 14px;}
			.repass-form-ul li input::-webkit-input-placeholder{
			     color:#d7d6d6;font-size: 14px;
			}
			.editor-li>label{display: block;float: left;width: 20%;height: 35px;line-height: 35px;}
	        .repass-form-ul li button{background: #00b4ff;color: #fff;display: block;width:100%;height:40px;line-height:40px;padding:0px;margin:auto;border: none;}
		    .sex-editor{display: block;float: left;width: 80%;}
		    .sex-editor input{width: 13px;display:inline-block;margin-left: 30px;}
		    .sex-editor label{display: inline-block;margin-left: 5px;}
		    .sex-editor label,.sex-editor input{vertical-align: middle;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav header" id="app">
			<a class="header-back">&lt;&nbsp;编辑资料</a>
		</header>
		<div class="mui-content">
		   <div class="jigou-content-div">
		   	   <div class="jigou-content-intro">
		   	   	   <form id="form1">
								 	<div class='meirong-icon'><img id="avatar" src="../images/dangy-03.png" /></div>
		   	   	   	   <div class="touxinag">更换头像</div>
		   	   	       <input type="file" id="file1" accept="image/*" capture="camera" class="touxiang-input" />
		   	   	       <ul class="repass-form-ul">
							<li><input type='text' name="nick_name" id="nick_name" placeholder="请输入昵称"></li>
							<!-- <li><input type='text' placeholder="请输入职业"></li> -->
							<li class="editor-li">
								<label>性别:</label>
								<div class="sex-editor" id="gender">
									<input type="radio" name="gender" value="0"/><label>女</label>
									<input type="radio" name="gender" value="1"/><label>男</label>
								</div>
							</li>
							<li><textarea name="introduce" placeholder="简介" rows="5"></textarea></li>
						    <li><button id="submit" type="button">确认提交</button></li>
					    </ul>

		   	   	   </form>
		   	   </div>
		   </div
		</div>
		<footer></footer>
		<script src="../static/js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/xialajiazai.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../static/js/uploadPreview.js" charset="utf-8"></script>
		<script type="text/javascript">
			
			mui.init()
			
		</script>
	</body>
<script type="text/javascript">
// 判断该当前状态是否登录
$(function(){
	var session = getCookie("session");
	if (session==""||session==null) {
		location.href="../public/login.html";
		return false;
	}
	// 获取账号信息
	var param = {};
	param.method = 'patform.home.readinfo';
	http_request(param,addinfo);
});

function addinfo(data){
	// 添加信息
	if (data.code==0) {
		// 获取成功
		var info = data.result;
		$("#avatar").attr("src",info.avatar);
		$("#nick_name").val(info.nick_name);
		$("textarea[name='introduce']").val(info.introduce);
		$("#gender>input[value='"+info.gender+"']").prop("checked",true);
	}else if (data.code==7) {
		// 登录失效
		alert("登录失效");
		deleteCookie("session");
		location.href="../public/login.html";
		return false;
	}else {
		alert(data.msg);
	}
}
// 图片上传预览
$("#file1").uploadPreview({ Img: "avatar", Width: 120, Height: 120 });
// 表单提交
$("#submit").click(function(){
	var param = {};
			param.method = "patform.home.updateinfo";
			param.nick_name = $("#nick_name").val();
			param.introduce = $("textarea[name='introduce']").val();
			param.session = getCookie("session");
			var timestamp = (new Date()).valueOf();
			param.timestamp = parseInt(timestamp/1000);
			param.app_key = "app_2";
			var a = $("input[name='gender']:checked").val();
			if (a!='undefined') {
				param.gender = a;
			}
			param.sign = generateSign(param);
			var formData = new FormData();
			$.each(param,function(index,value){
				formData.append(index,value);
			});
			var fileinfo = document.getElementById("file1").files[0];
			if (fileinfo!=undefined) {
				// console.log(fileinfo);
				formData.append("file",fileinfo);
			}
			// var j = formData.entries();
			// for (var i = 0; i < 10; i++) {
			// 	// console.log(1);
			// 	console.log(j.next());
			// }
			$.ajax({
					type: "post",
					async: false,
					url: "http://www.lianshoumeili.xbtcsc.com.cn/huanianApi/user_index.php",
					data: formData,
					dataType: "json",
					contentType: false,
					processData: false,
					complete: function(json){
						// console.log();
						data = eval("callback"+json.responseText);
						// console.log(data);
						// callback(json);
					}
			});
})
function callback(data)
{
	if (data.code=="0") {
		// 修改成功，跳转到个人中心
		alert("修改成功");
		location.href = "../personalCenter/businessCenter.html";
		return false;
	}else if (data.code==7) {
		// 登录失效
		alert("登录失效");
		deleteCookie("session");
		location.href="../public/login.html";
		return false;
	}else {
		alert(data.msg);
	}
}
</script>
</html>
